<template>
  <!-- Banner -->
  <Banner :data="form" />

  <div v-if="form" class="flex flex-col w-full md:w-3/4 m-auto my-3">

    <Breadcrumb :data="layout" title="文章详情" />

    <div class="m-3 bg-white p-3 mt-4 flex flex-col gap-xl rounded-lg">
      <div class="article-title-box p-4">
        <div class="sm:text-3xl text-xl sm:text-left text-center">{{ form.title }}</div>
        <div class="text-sm pt-2 text-gray-4 flex gap-xl sm:text-left sm:justify-start justify-center">
          <span>{{ form.createTime }}</span>
          <span>浏览：{{ form.actualViews }}</span>
        </div>
      </div>
      <div class="content leading-8 sm:text-xl px-3 pb-5 text-gray-700" v-html="form.content"></div>
    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import type {Article} from "~/api/cms/article/model";
import Breadcrumb from "~/components/Breadcrumb.vue";
import {getIdByParam} from "~/utils/common";

const route = useRoute();


// 页面信息
const form = ref<Article | any>();
const layout = ref<any>({});

// 请求数据
const { data: info } = await useServerRequest<ApiResult<Article>>('/cms/article/' + getIdByParam())
form.value = info.value?.data;
form.value.num = 1;
form.value.radio = '0'

layout.value.parentName = form.value?.categoryName;
layout.value.categoryName = form.value?.categoryName;
</script>

<style scoped lang="scss">
  .content *{
    max-width: 100%;
    overflow: hidden;
  }
</style>
